<template>
	<!-- 商品卡 -->
	<view class="good-details">
		<!-- <radio color="black"></radio> -->
		<slot name="radio"></slot>
		<image :src="good.goods.cover_url" mode="aspectFit"></image>
		<view class="goods-info">
			<view class="name-price">
				<text class="name">{{good.goods.name}}</text>
				<text class="price">&yen;{{good.goods.sku[0].specification_list[0].price}}</text>
			</view>
			<text class="info" style="font-size: 10px;">{{good.goods.sku[0].specification_list[0].specification_name+good.goods.sku[0].specification_list[0].proposal}}</text>
			<text class="taste" style="font-size: 10px;">{{"口味"+good.goods.sku[0].flavor_name}}</text>
			<slot name="num-box"></slot>
		</view>
		
	</view>
</template>

<script>
	import {mapMutations,mapState} from "vuex"
	export default {
		name:"good-info",
		data() {
			return {
				
			};
		},
		props:{
			good:{
				default:null,
				type:Object
			}
		},
		computed:{
			// ...mapState('cart',['num','sum'])
		},
		methods:{  
		}
	}
</script>

<style lang="scss">
.good-details{
	width: 100%;
	height: 200rpx;
	display: flex;
	position: relative;
	align-items: center;
	// border:1px solid red;
	padding: 10rpx 5rpx 10rpx 30rpx;
	box-sizing: border-box;
	image{
		height:100%;
		width: 25%;
	}
	.goods-info{
		width: 70%;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin-left: 15rpx;
		.name-price{
			height: 33%;
			display: flex;
			justify-content: space-between;
			
			.name{
				width: 50%;
			}
			.price{
				width: 50%;
			}
		}
		.info{
			width: 100%;
			height: 33%;
		}
		.taste{
			width: 65%;
			height: 33%;
		}
	}
}
</style>